<template>
<h1>Hello World</h1>
<!-- 三种绑定 -->
<span>{{msg}}</span>
<div v-html="innerHtmlStr"></div>
<div v-bind:class="modifyClass"><span>{{normalString}}</span></div><!--  v-bind:class 可以简写成 :class -->

<div v-if="show">this is show</div>
<div v-else>this is not show</div>

<!-- 列表展示 -->
<!-- <div v-for="(value,key) in listData">
    <span>{{value}}</span><span>{{key}}</span>
</div> -->
<ul>
    <li v-for="(value,index) in listData" v-bind:key="index">
        <span>{{value}}</span><span>{{index}}</span>
    </li>
</ul>

<!-- 事件处理 -->
<button v-on:click="count++">+:{{count}}</button>
<button @click="count--">-:{{count}}</button>
<button @click="change">double:{{count}}</button>

<!-- 表单输入绑定 -->
<div> 
    <input type="text" v-model="inputValue">
    <p>{{inputValue}}</p>
</div>
<div> 
    <!-- 操作符使用 lazy表示回车或失去焦点时才更新，trim表示去除首尾空格 -->
    <input type="text" v-model.lazy.trim="inputValue1">
    <p>{{inputValue1}}</p>
</div>

</template>

<script setup>
import { ref,onMounted } from 'vue';

// const msg = 'Hello World';
const msg = ref("hello world");
const innerHtmlStr = ref("<a href='#'>hello world</a>");

const modifyClass = ref("normal");
const normalString = ref("this is a normal string");

const show = ref(true);

const listData = ref([1,2,3,4,5]);

const count = ref(0);

const inputValue = ref("");
const inputValue1 = ref("");

const change = (event)=>{
    count.value = count.value * 2;
}

onMounted(()=>{
    setInterval(()=>{
        msg.value = Math.random()
    },1000);

    setTimeout(()=>{
        innerHtmlStr.value = "<a href='#'>this is changed</a>"

        show.value = false;

        modifyClass.value = "changed";
        normalString.value = "this is a changed string";
    },3000);
})

// export default {
//   name: 'HelloWorld',
//   props: {
//     msg: String
//   }
// }

</script>

<style scoped>
.normal{
    color: green;
}

.changed{
    color: red;
}
</style>